<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" />
  <xsl:template match="/">
    <html>
      <head>
        <title>
          Levitate Browser
        </title>
        <link href="data/style.css" rel="stylesheet" type="text/css" />
        <link rel="shortcut icon" href="data/favicon.ico" />
        <link id="photos" rel="alternate" href="photos.rss" type="application/rss+xml" title="PicLens RSS" />
        <script type="text/javascript" src="data/organizer.js"/>
      </head>

      <body>
        <iframe name="hole" width="0" height="0" style="display:none">.</iframe>
        <form method="post" id="datasenderform"  style="display:none" action="/page/organizer" target="hole">
          <input type="text" id="operation" name="operation"/>
          <input type="text" id="param" name="param"/>
          <input type="text" id="selectionlist" name="selectionlist"/>
        </form>
        <!-- SIGN OUT BAR -->
        <table width="100%" cellspacing="0" cellpadding="0">
          <tr>
            <td align="right" class="textunderpic">
              Signed in as <span class="pagelink">
                <xsl:value-of select= "data/user/name" />
              </span>
              <span class="pagelinksep">|</span>
              <a href="/page/signin" class="pagelink">sign out</a>
            </td>
          </tr>
        </table>
        <table width="800" align="center" cellspacing="0" cellpadding="0">
          <tr>
            <td>
              <!-- AVATAR, TITLE, MENUBAR -->
              <table style="padding-top:20px;padding-bottom:20px;">
                <tr>
                  <td width="55" >
                    <a href="/"><img src="data/avatar.jpg" width="48" height="48" style="border:thin none;"/></a>
                  </td>
                  <td width="480" >
                    <div class="title">Levitate Image Browser</div>
                    <xsl:if test="data/user/isRoot = 'True'">
                      <a href="/page/ImageBrowser" class="pagelink">Browse</a>
                    </xsl:if>
                    <xsl:if test="data/user/isRoot != 'True'">
                      <span class="pagelinkhere">Browse</span>
                    </xsl:if>
                    <span class="pagelinksep">|</span>
                    <a href="/page/organizer" class="pagelink">Organize</a>
                    <span class="pagelinksep">|</span>
                    <a href="/page/Sets" class="pagelink">Sets</a>
                    <span class="pagelinksep">|</span>
                    <a href="/page/Tags" class="pagelink">Tags</a>
                  </td>
                  <td width="265" align="right">
                    <form action="/search/" method="get" onblur="this.q.value = 'Search...'; this.q.style.color='#999999';" style="padding-top:4;margin-bottom:0;">
                      <input name="q" type="text" value="Search..." class="searchbox" onfocus="if (this.value == 'Search...') this.value = ''; this.style.color='#000000';"/>
                      <button type="submit" class="searchbtn">Search</button>
                      <xsl:if test="data/user/isFiltered = 'True' and data/user/isRoot != 'True'">
                      <div style="padding-top:3;padding-left:20" align="left">
                        <a class="pagelink" href="#"  onclick="document.getElementById('datasenderform').target='';sendCommand('clearFilter', '/page/ImageBrowser');">Clear search results</a>
                      </div>
                      </xsl:if>
                    </form>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>

              <!-- IMAGES 2xN -->
              <table width="800" cellspacing="0" cellpadding="0" >
                <xsl:for-each select="data/images/image[position() mod 3 = 1]">
                  <tr valign="top" >
                    <xsl:for-each select=".|following-sibling::image[position() &lt; 3]">
                      <td width="260" style="padding-top:30px;">
                        <!-- TITLE -->
                        <p class="pictitle" width="260">
                          <xsl:value-of select="title" />
                        </p>
                        <a>
                          <!-- LINK -->
                          <xsl:attribute name="href">
                            <xsl:value-of select= "file" />
                          </xsl:attribute>
                          <!-- THUMBNAIL -->
                          <img style="border:thin none;">
                            <xsl:attribute name="width">
                              <xsl:value-of select= "thumbWidth" />
                            </xsl:attribute>
                            <xsl:attribute name="height">
                              <xsl:value-of select= "thumbHeight" />
                            </xsl:attribute>
                            <xsl:attribute name="src">
                              <xsl:value-of select= "thumb" />
                            </xsl:attribute>
                          </img>
                        </a>
                        <p class="textunderpic">
                          Created on <a href="date/" class="textunderpic">Mar 18, 2008</a>
                          <br/>
                          <a href="comment/" class="textunderpic">0 comments</a>
                        </p>
                      </td>
                    </xsl:for-each>
                  </tr>
                </xsl:for-each>
              </table>
            </td>
          </tr>
          <tr>
            <td class="numpic">

              <!-- NEXY PAGE -->
              <!--&lt; Prev
              1
              <a href="/page/2/">2</a>
              <a href="/page/3/">3</a>
              <a href="/page/4/">4</a>
              <a href="/page/5/">5</a>
              <a href="/page/2/">Next &gt;</a-->
                (<xsl:value-of select="count(data/images/image)" /> photos)
            </td>
          </tr>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>
